<!-- 大屏 -->
<template>
  <div class="large-screen">
    <div class="one">
      <div class="home" @click="clickHome"><HomeOutlined /></div>
      <div class="bg">郑州联通城市大脑</div>
      <div class="time">
        <div class="time-one">{{ timeData.nowTime }}</div>
        <div class="time-two">{{ timeData.nowDate }}</div>
      </div>
    </div>
    <div class="two">
      <TitleBox class="two-left" title="阿里云资源使用情况">
        <template #content>
          <div class="two-left-one">
            <div class="item item-one">
              <div>资源统计</div>
              <div></div>
              <div>STATISTICS</div>
            </div>
            <div
              class="item item-two"
              v-for="item in usageAlibabaCloudResources.resourceCountList"
              :key="item.resourceName"
            >
              <div class="name">{{ item.resourceName }}</div>
              <div class="number">
                {{ item.resourceCount }}
                <span>
                  {{ item.unit }}
                </span>
              </div>
            </div>
          </div>
          <div class="two-left-two">
            <div
              class="item"
              v-for="item in usageAlibabaCloudResources.resourceUseInfoList"
              :key="item.resourceName"
            >
              <div class="item-left">
                <div>
                  <img
                    v-show="item.resourceName === 'CPU'"
                    src="@/assets/images/cpu图标.png"
                    alt=""
                    class="cup-image"
                  />
                  <img
                    v-show="item.resourceName === 'SSD'"
                    src="@/assets/images/内存图标.png"
                    alt=""
                    class="image"
                  />
                  <img
                    v-show="item.resourceName === '云盘'"
                    src="@/assets/images/内存图标.png"
                    alt=""
                    class="image"
                  />
                </div>
              </div>
              <div class="item-right">
                <div class="name">{{ item.resourceName }} 使用量</div>
                <div class="progress">
                  <div :style="{ width: item.useRate + '%' }"></div>
                </div>
                <div class="text">
                  <div>
                    使用 {{ item.usedCount }} {{ item.unit }}，共
                    {{ item.resourceCount }} {{ item.unit }}
                  </div>
                  <div>{{ item.useRate }}%</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </TitleBox>
      <TitleBox class="two-center" title="工单系统数据展示" :border="false">
        <template #content>
          <div class="two-center-one">
            <div
              class="item"
              v-for="item in workOrderSystemData.orderAllCount"
              :key="item.processName"
            >
              <div>{{ item.orderCount }}</div>
              <div>{{ item.processName }}</div>
            </div>
          </div>
          <div class="two-center-two">
            <div class="name-button">
              <div class="name">工单数量占比</div>
              <div class="button">
                <div
                  class="item"
                  :class="{ action: workOrderSystemDataStatus === 2 }"
                  @click="clickWeekMonth(2)"
                >
                  本周数据
                </div>
                <div
                  class="item"
                  :class="{ action: workOrderSystemDataStatus === 3 }"
                  @click="clickWeekMonth(3)"
                >
                  本月数据
                </div>
              </div>
            </div>
            <div id="order-number-pie"></div>
          </div>
        </template>
      </TitleBox>
      <TitleBox class="two-right" title="设备状态概览">
        <template #content>
          <div class="two-left-one">
            <div
              class="item item-two"
              v-for="item in overviewEquipmentStatus.deviceCountList"
              :key="item.deviceType"
            >
              <div class="name">{{ item.deviceType }}</div>
              <div class="number">{{ item.deviceCount }} <span>台</span></div>
            </div>
          </div>
          <div id="equipment-pie"></div>
        </template>
      </TitleBox>
    </div>
    <div class="three">
      <TitleBox class="title-box left" title="云盾告警信息展示">
        <template #content>
          <div class="three-left-one" id="alarm-bar"></div>
          <div class="three-left-two">
            <div class="name">告警数量变化趋势</div>
            <div id="alarm-line"></div>
          </div>
        </template>
      </TitleBox>
      <TitleBox class="title-box right" title="云盾告警实时列表">
        <template #content>
          <div class="three-right-one">
            <a-table
              class="table"
              :columns="columns"
              :data-source="realtimeListCloudShieldAlerts"
              :pagination="false"
              :scroll="{ y: tableScrollY }"
              size="small"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'lv'">
                  <a v-if="record.lv === '高风险'" style="color: #ef595a">
                    高风险
                  </a>
                  <a v-else-if="record.lv === '中风险'" style="color: #fec72f">
                    中风险
                  </a>
                  <a v-else style="color: #4fd272"> 低风险 </a>
                </template>
                <template v-if="column.dataIndex === 'status'">
                  <a v-if="record.status === '未恢复'" style="color: #ef595a">
                    未恢复
                  </a>
                  <a v-else style="color: #4fd272"> 已恢复 </a>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                  <a class="operation"> 研判 </a>
                </template>
              </template>
            </a-table>
          </div>
        </template>
      </TitleBox>
    </div>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  import api from '@/axios/api.js'
  import TitleBox from '@/components/TitleBox.vue'
  import { HomeOutlined } from '@ant-design/icons-vue'
  import { useRouter } from 'vue-router'
  // 引入方法
  import {
    defineProps,
    defineEmits,
    watch,
    onMounted,
    onBeforeUnmount,
    ref,
  } from 'vue'
  import dayjs from 'dayjs'
  import * as echarts from 'echarts'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const router = useRouter()
  const timeData = ref({
    nowTime: undefined,
    nowDate: undefined,
  }) //当前时间数据
  let timer = null //定时器
  const innerHeight = window.innerHeight //浏览器视口高度
  const innerWidth = window.innerWidth
  let tableScrollY = ref(0)
  const columns = [
    {
      title: '名称',
      dataIndex: 'alarmName',
      align: 'center',
      width: 120,
    },
    {
      title: '等级',
      dataIndex: 'level',
      align: 'center',
      width: 40,
    },
    {
      title: '内容',
      dataIndex: 'content',
      align: 'center',
    },
    {
      title: '时间',
      dataIndex: 'alarmTime',
      align: 'center',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 60,
    },
    {
      title: '人工研判',
      dataIndex: 'operation',
      align: 'center',
      width: 80,
    },
  ]
  const cloudShieldAlertInfo = ref({
    alarmBar: {
      yAxisData: [],
      seriesData: [],
    },
    alarmLine: {
      legendData: [],
      xAxisData: [],
      seriesData: [],
    },
  }) //云盾告警信息
  const randomColorList = ref([
    {
      itemStyle: {
        color: '#5FD5EC',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(95, 213, 236, 0.2)',
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0)',
          },
        ]),
      },
    },
    {
      itemStyle: {
        color: 'rgba(72, 255, 178, 1)',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(72, 255, 178, 0.2)',
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255,0)',
          },
        ]),
      },
    },
    {
      itemStyle: {
        color: 'rgba(67, 70, 211, 1)',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(67, 70, 211, 0.2)',
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255,0)',
          },
        ]),
      },
    },
    {
      itemStyle: {
        color: 'rgba(255, 207, 95, 1)',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(255, 207, 95, 0.2)',
          },
          {
            offset: 1,
            color: 'rgba(72, 255, 178, 0)',
          },
        ]),
      },
    },
    {
      itemStyle: {
        color: '#5FD5EC',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(95, 213, 236, 0.2)',
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0)',
          },
        ]),
      },
    },
  ]) //随机颜色
  const overviewEquipmentStatus = ref({
    deviceCountList: [],
    seriesData: [],
    text: undefined,
  }) //设备状态概览
  const usageAlibabaCloudResources = ref({
    resourceCountList: [],
    resourceUseInfoList: [],
  }) //阿里云资源使用情况
  const realtimeListCloudShieldAlerts = ref([]) //云盾告警实时列表
  const workOrderSystemData = ref({
    orderAllCount: [],
    orderNumberLine: {
      legendData: [],
      xAxisData: [],
      seriesData: [],
    },
    seriesData: [],
    text: undefined,
  }) //工单系统数据
  const workOrderSystemDataStatus = ref(2) //工单系统数据状态
  onMounted(() => {
    tableScrollY.value = (300 / 1080) * innerHeight
    getNowTime()
    timer = setInterval(() => {
      getNowTime()
    }, 1000)

    getCloudShieldAlertInformation()
    getOverviewEquipmentStatus()
    getUsageAlibabaCloudResources()
    getRealtimeListCloudShieldAlerts()
    getWorkOrderSystemData(workOrderSystemDataStatus.value)
    setInterval(() => {
      getCloudShieldAlertInformation()
      getUsageAlibabaCloudResources()
      getWorkOrderSystemData(workOrderSystemDataStatus.value)
    }, 5000)
  })
  onBeforeUnmount(() => {
    if (timer) {
      clearInterval(timer) // 组件卸载时清除定时器
    }
  })
  // 自定义方法
  //获取云盾告警信息展示
  const getCloudShieldAlertInformation = async () => {
    const res = await api.getCloudShieldAlertInformation()
    console.log('获取云盾告警信息展示', res)
    cloudShieldAlertInfo.value.alarmBar.yAxisData =
      res.data.data.thisWeekCount.map((item) => {
        return item.level
      })
    cloudShieldAlertInfo.value.alarmBar.seriesData =
      res.data.data.thisWeekCount.map((item) => {
        return item.count
      })
    cloudShieldAlertInfo.value.alarmLine.legendData =
      res.data.data.thisWeekDayCount[0].alarmLevelCount.map((item) => {
        return item.level
      })
    cloudShieldAlertInfo.value.alarmLine.xAxisData =
      res.data.data.thisWeekDayCount.map((item) => {
        return item.weekName
      })
    cloudShieldAlertInfo.value.alarmLine.seriesData =
      cloudShieldAlertInfo.value.alarmLine.legendData.map((item, index) => {
        let list = []
        res.data.data.thisWeekDayCount.forEach((itemTwo) => {
          itemTwo.alarmLevelCount.forEach((itemThree) => {
            if (item === itemThree.level) {
              list.push(itemThree.count)
            }
          })
        })
        return {
          name: item,
          type: 'line',
          smooth: true,
          data: list,
          symbol: 'none',
          ...randomColorList.value[index],
        }
      })
    console.log('cloudShieldAlertInfo', cloudShieldAlertInfo.value)
    createAlarmBar()
    createAlarmLine()
  }
  //获取设备状态概览
  const getOverviewEquipmentStatus = async () => {
    const res = await api.getOverviewEquipmentStatus()
    overviewEquipmentStatus.value.deviceCountList =
      res.data.data.deviceCountList
    overviewEquipmentStatus.value.seriesData =
      res.data.data.deviceStatusList.map((item) => {
        return { value: item.deviceStatusCount, name: item.deviceStatus }
      })
    overviewEquipmentStatus.value.text = res.data.data.deviceCount
    console.log('pie数据', overviewEquipmentStatus.value)
    createEquipmentPie()
  }
  //获取阿里云资源使用情况
  const getUsageAlibabaCloudResources = async () => {
    const res = await api.getUsageAlibabaCloudResources()
    const resourceUseInfoList = res.data.data.resourceUseInfoList.map(
      (item) => {
        return {
          ...item,
          useRate: (item.useRate * 100).toFixed(2),
        }
      }
    )

    usageAlibabaCloudResources.value = { ...res.data.data, resourceUseInfoList }

    console.log('阿里云资源使用情况', res)
  }
  //获取云盾告警实时列表
  const getRealtimeListCloudShieldAlerts = async () => {
    const res = await api.getRealtimeListCloudShieldAlerts()
    realtimeListCloudShieldAlerts.value = res.data.data
  }
  //获取工单系统数据展示
  const getWorkOrderSystemData = async (data) => {
    const res = await api.getWorkOrderSystemData(data)
    workOrderSystemData.value.orderAllCount = res.data.data.orderAllCount
    workOrderSystemData.value.seriesData = res.data.data.orderAllCount.map(
      (item) => {
        return { value: item.orderCount, name: item.processName }
      }
    )
    workOrderSystemData.value.text = res.data.data.orderAllCount.reduce(
      (accumulator, currentValue) => accumulator + currentValue.orderCount,
      0
    )
    console.log('获取工单系统数据展示', workOrderSystemData.value)
    createOrderNumberPie()
  }
  //点击home按钮
  const clickHome = () => {
    router.push('/layout')
  }
  //获取当前时间
  const getNowTime = () => {
    const now = dayjs()
    const nowTime = now.format('HH:mm:ss')
    const nowDate = now.format('YYYY.MM.DD')
    timeData.value = {
      nowTime,
      nowDate,
    }
  }
  //创建工单数量占比饼图
  const createOrderNumberPie = () => {
    var chartDom = document.getElementById('order-number-pie')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      tooltip: {
        trigger: 'item',
      },
      graphic: {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: workOrderSystemData.value.text,
          textAlign: 'center',
          fill: '#fff', // 文本颜色
          fontSize: (16 / 1080) * innerHeight,
          fontWeight: 'bold',
        },
      },
      legend: {
        show: false,
      },
      series: [
        {
          name: '数量',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'], // 调整饼图的中心位置
          label: {
            formatter: '{b}: {c} ({d}%)',
            color: '#fff', // 文字颜色（白色）
            textBorderColor: 'transparent', // 去除描边
            textBorderWidth: 0, // 描边宽度为0
            fontSize: (12 / 1080) * innerHeight, // 字体大小
          },
          data: workOrderSystemData.value.seriesData,
        },
      ],
    }

    option && myChart.setOption(option)
  }
  //创建设备饼图
  const createEquipmentPie = () => {
    var chartDom = document.getElementById('equipment-pie')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      tooltip: {
        trigger: 'item',
      },
      graphic: {
        type: 'text',
        left: (74 / 1080) * innerWidth,
        top: (124 / 1080) * innerHeight,
        style: {
          text: overviewEquipmentStatus.value.text,
          textAlign: 'center',
          fill: '#fff', // 文本颜色
          fontSize: (16 / 1080) * innerHeight,
          fontWeight: 'bold',
        },
      },
      legend: {
        orient: 'vertical',
        height: (150 / 1080) * innerHeight,
        itemGap: (10 / 1080) * innerWidth,
        top: 'center',
        left: (150 / 1080) * innerWidth,
        itemHeight: (14 / 1080) * innerHeight,
        itemWidth: (14 / 1080) * innerWidth,
        textStyle: {
          color: '#fff',
          fontSize: (12 / 1080) * innerHeight,
        },
        formatter: function (name) {
          var seriesData = overviewEquipmentStatus.value.seriesData
          for (var i = 0; i < seriesData.length; i++) {
            if (seriesData[i].name === name) {
              return name + ': ' + seriesData[i].value
            }
          }
          return name
        },
      },
      series: [
        {
          name: '数量',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['30%', '50%'], // 调整饼图的中心位置
          label: {
            show: false,
            position: 'center',
          },
          data: overviewEquipmentStatus.value.seriesData,
        },
      ],
    }

    option && myChart.setOption(option)
  }
  //创建告警柱状图
  const createAlarmBar = () => {
    var chartDom = document.getElementById('alarm-bar')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      color: ['#2F6DFF'], // 颜色数组
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        show: false,
      },
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false, // 隐藏 x 轴的文字
        },
      },
      yAxis: {
        type: 'category',
        data: cloudShieldAlertInfo.value.alarmBar.yAxisData,
        axisTick: {
          show: false, // 关闭 y 轴刻度线
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: (12 / 1080) * innerHeight,
          },
        },
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: cloudShieldAlertInfo.value.alarmBar.seriesData,
          barWidth: (12 / 1080) * innerHeight,
          label: {
            show: true, // 显示标签
            position: 'right', // 标签的位置，这里设置为柱子顶部
            formatter: '{c}', // 格式化标签内容，{c} 表示当前数据项的值
            color: '#fff',
            fontSize: (12 / 1080) * innerHeight,
          },
        },
      ],
    }

    option && myChart.setOption(option)
  }
  //创建告警数量变化趋势折线图
  const createAlarmLine = () => {
    var chartDom = document.getElementById('alarm-line')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      textStyle: {
        color: '#fff',
        fontSize: (12 / 1080) * innerHeight,
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        icon: 'circle',
        data: cloudShieldAlertInfo.value.alarmLine.legendData,
        itemHeight: (14 / 1080) * innerHeight,
        textStyle: {
          color: '#fff',
          fontSize: (12 / 1080) * innerHeight,
        },
      },
      grid: {
        left: (30 / 1080) * innerHeight,
        right: (20 / 1080) * innerHeight,
        top: (36 / 1080) * innerHeight,
        bottom: (50 / 1080) * innerHeight,
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          textStyle: {
            fontSize: (12 / 1080) * innerHeight,
          },
        },
        boundaryGap: false,
        data: cloudShieldAlertInfo.value.alarmLine.xAxisData,
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: (12 / 1080) * innerHeight,
          },
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(233, 233, 233, 0.2)',
          },
        },
      },
      series: cloudShieldAlertInfo.value.alarmLine.seriesData,
    }

    option && myChart.setOption(option)
  }
  //点击本周月
  const clickWeekMonth = (value) => {
    workOrderSystemDataStatus.value = value
    getWorkOrderSystemData(workOrderSystemDataStatus.value)
  }
</script>
<style lang="less" scoped>
  .large-screen {
    padding: (20 / @vh) (20 / @vh);
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      90deg,
      #000000 0%,
      #112830 29%,
      #112830 49%,
      #112830 69%,
      #000000 100%
    );
    color: #fff;
    .one {
      position: relative;
      margin-bottom: (20 / @vh);
      width: 100%;
      height: (54 / @vh);
      .home {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: (20 / @vw);
        color: #fff;
        cursor: pointer;
      }
      .bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: (1360 / @vh);
        height: (54 / @vh);
        background-image: url('@/assets/images/头部背景.png');
        background-size: cover;
        text-align: center;
        line-height: (54 / @vh);
        font-size: (26 / @vh);
        font-weight: 700;
      }
      .time {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        text-align: right;
        .time-one {
          font-size: (16 / @vh);
          font-weight: 700;
        }
        .time-two {
          font-size: (12 / @vh);
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .two {
      display: flex;
      justify-content: space-between;
      margin-bottom: (20 / @vh);
      height: (480 / @vh);
      .two-left {
        .two-left-one {
          display: flex;
          justify-content: space-between;
          padding: (16 / @vh);
          margin-bottom: (30 / @vh);
          border-radius: 6px;
          background: rgba(47, 109, 255, 0.15);
          .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: (22 / @vh) 0;
            width: (90 / @vh);
            height: (90 / @vh);
            border-radius: (6 / @vh);
            .name {
              font-size: (12 / @vh);
              color: rgba(255, 255, 255, 0.6);
            }
            .number {
              font-size: (16 / @vh);
              color: rgba(255, 255, 255, 1);
              span {
                font-size: (12 / @vh);
              }
            }
          }
          .item-one {
            padding: (18 / @vh) 0;
            div:nth-child(1) {
              font-size: (18 / @vh);
            }
            div:nth-child(2) {
              width: (56 / @vh);
              height: (1 / @vh);
              background-color: rgba(255, 255, 255, 0.3);
            }
            div:nth-child(3) {
              font-size: (10 / @vh);
              color: rgba(255, 255, 255, 0.3);
            }
          }
          .item:nth-child(2) {
            background-color: rgba(47, 109, 255, 1);
          }
          .item:nth-child(3) {
            background-color: rgba(47, 109, 255, 0.7);
          }
          .item:nth-child(4) {
            background-color: rgba(47, 109, 255, 0.4);
          }
        }
        .two-left-two {
          .item {
            display: flex;
            align-items: center;
            margin-bottom: (26 / @vh);
            .item-left {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: (24 / @vh);
              width: (56 / @vh);
              height: (56 / @vh);
              background: rgba(255, 255, 255, 0.1);
              border-radius: 6px;
              div {
                display: flex;
                align-items: center;
                justify-content: center;
                width: (36 / @vh);
                height: (36 / @vh);
                border-radius: 6px;
                border: 1px solid #2f6dff;
                .cpu-image {
                  width: (22 / @vh);
                }
                .image {
                  width: (20 / @vh);
                  // height: (26 / @vh);
                }
              }
            }
            .item-right {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              flex: 1;
              height: (56 / @vh);
              font-size: (12 / @vh);
              .progress {
                height: (10 / @vh);
                background-color: rgba(47, 109, 255, 0.1);
                div {
                  height: 100%;
                  background-color: rgba(47, 109, 255, 1);
                }
              }
              .text {
                display: flex;
                justify-content: space-between;
                color: rgba(255, 255, 255, 0.7);
              }
            }
          }
        }
      }
      .two-center {
        flex: 1;
        margin: 0 (20 / @vh);
        .two-center-one {
          display: flex;
          justify-content: space-between;
          margin-bottom: (30 / @vh);
          .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: (140 / @vw);
            height: (68 / @vh);
            border-radius: (6 / @vh);
            border: 1px solid rgba(47, 109, 255, 1);
            background-color: rgba(47, 109, 255, 0.1);
            div:nth-child(1) {
              margin-bottom: (4 / @vh);
            }
            div:nth-child(2) {
              font-size: (12 / @vh);
            }
          }
        }
        .two-center-two {
          .name-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            // margin-bottom: (20 / @vh);
            .name {
              font-size: (14 / @vh);
            }
            .button {
              display: flex;
              justify-content: space-between;
              .item {
                padding: (5 / @vh) (10 / @vh);
                border: (1 / @vh) solid #2f6dff;
                border-radius: (6 / @vh);
                background-color: rgba(47, 109, 255, 0.2);
                font-size: (12 / @vh);
                cursor: pointer;
                &:first-child {
                  margin-right: (10 / @vh);
                }
                &:hover {
                  background-color: rgba(47, 109, 255, 0.5);
                }
              }
              .action {
                background-color: #2f6dff;
              }
            }
          }
          #order-number-pie {
            width: 100%;
            height: (266 / @vh);
          }
        }
      }
      .two-right {
        .two-left-one {
          display: flex;
          justify-content: space-between;
          padding: (16 / @vh);
          margin-bottom: (10 / @vh);
          border-radius: 6px;
          background: rgba(47, 109, 255, 0.15);
          .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: (22 / @vh) 0;
            width: (90 / @vh);
            height: (90 / @vh);
            border-radius: (6 / @vh);
            .name {
              font-size: (12 / @vh);
              color: rgba(255, 255, 255, 0.6);
            }
            .number {
              font-size: (16 / @vh);
              color: rgba(255, 255, 255, 1);
              span {
                font-size: (12 / @vh);
              }
            }
          }
          .item-one {
            padding: (18 / @vh) 0;
            div:nth-child(1) {
              font-size: (18 / @vh);
            }
            div:nth-child(2) {
              width: (56 / @vh);
              height: (1 / @vh);
              background-color: rgba(255, 255, 255, 0.3);
            }
            div:nth-child(3) {
              font-size: (10 / @vh);
              color: rgba(255, 255, 255, 0.3);
            }
          }
          .item:nth-child(1) {
            background-color: rgba(47, 109, 255, 1);
          }
          .item:nth-child(2) {
            background-color: rgba(47, 109, 255, 0.8);
          }
          .item:nth-child(3) {
            background-color: rgba(47, 109, 255, 0.6);
          }
          .item:nth-child(4) {
            background-color: rgba(47, 109, 255, 0.4);
          }
        }
        #equipment-pie {
          width: (480 / @vw);
          height: (260 / @vh);
        }
      }
    }
    .three {
      display: flex;
      justify-content: space-between;
      height: (440 / @vh);
      .title-box {
        flex: 0.5;
      }
      .left {
        margin-right: (10 / @vh);
        #alarm-bar {
          width: 100%;
          height: (100 / @vh);
        }
        .three-left-one {
          margin-bottom: (20 / @vh);
        }
        .three-left-two {
          .name {
            font-size: (14 / @vh);
          }
          #alarm-line {
            width: 100%;
            height: (238 / @vh);
          }
        }
      }
      .right {
        margin-left: (10 / @vh);
        .three-right-one {
          .table {
            :deep(.ant-table) {
              background-color: rgba(47, 109, 255, 0);
              font-size: (14 / @vh);
              .ant-table-cell {
                border-color: rgba(47, 109, 255, 0.3);
                background-color: rgba(47, 109, 255, 0);
                color: #fff;
                &::before {
                  background-color: rgba(47, 109, 255, 0);
                }
              }
              .ant-table-cell-row-hover {
                background-color: rgba(47, 109, 255, 0);
              }
              .ant-table-cell-scrollbar {
                display: none;
              }
              .ant-table-body {
                &::-webkit-scrollbar {
                  display: black;
                  width: 12px; /* 滚动条的宽度 */
                  height: 12px; /* 滚动条的高度（用于水平滚动条） */
                }
              }
              .ant-table-thead {
                background-color: rgba(47, 109, 255, 0.3);
              }
            }
            .operation {
              color: #2f6dff;
            }
          }
        }
      }
    }
  }
</style>
